@@include('header.htm', {
  "title": "Badges - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "components",
	"active": "badge"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Badges</h1>

	@@include('breadcrumb.htm', {
		"parent": "components",
		"sub_parent": "components",
		"active": "badge"
	})
</div>

<div class="row">
	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header justify-content-between card-header-border-bottom">
				<h2>Badges </h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/badge/" target="_blank"> more details.</a></p>

				<h1 class="mb-2 text-dark">Heading
					<span class="badge badge-secondary ">New</span>
				</h1>

				<h2 class="mb-2 text-dark">Heading
					<span class="badge badge-secondary ">New</span>
				</h2>

				<h3 class="mb-2 text-dark">Heading
					<span class="badge badge-secondary ">New</span>
				</h3>

				<h4 class="mb-2 text-dark">Heading
					<span class="badge badge-secondary ">New</span>
				</h4>

				<h5 class="mb-2 text-dark">Heading
					<span class="badge badge-secondary ">New</span>
				</h5>

				<h6 class="mb-2 text-dark">Heading
					<span class="badge badge-secondary ">New</span>
				</h6>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Contextual Variations </h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Add any of the below mentioned modifier classes to change the appearance of a badge. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/badge/#contextual-variations" target="_blank"> more details.</a></p>
				<span class="mb-2 mr-2 badge badge-primary">Primary</span>
				<span class="mb-2 mr-2 badge badge-secondary">Secondary</span>
				<span class="mb-2 mr-2 badge badge-success">Success</span>
				<span class="mb-2 mr-2 badge badge-danger">Danger</span>
				<span class="mb-2 mr-2 badge badge-warning">Warning</span>
				<span class="mb-2 mr-2 badge badge-info">Info</span>
				<span class="mb-2 mr-2 badge badge-dark">Dark</span>
			</div>
		</div>

		<div class="card card-default rounded mb-0 bg-white">
			<div class="card-header card-header-border-bottom">
				<h2>Pill Badges </h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> Use the <code>.badge-pill</code> modifier class to make badges more rounded. Read bootstrap
					documentaion <a href="https://getbootstrap.com/docs/4.6/components/badge/#pill-badges" target="_blank"> more details.</a></p>
				<span class="mb-2 mr-2 badge badge-pill badge-primary">Primary</span>
				<span class="mb-2 mr-2 badge badge-pill badge-secondary">Secondary</span>
				<span class="mb-2 mr-2 badge badge-pill badge-success">Success</span>
				<span class="mb-2 mr-2 badge badge-pill badge-danger">Danger</span>
				<span class="mb-2 mr-2 badge badge-pill badge-warning">Warning</span>
				<span class="mb-2 mr-2 badge badge-pill badge-info">Info</span>
				<span class="mb-2 mr-2 badge badge-pill badge-dark">Dark</span>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
